<template>
	<view>
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无数据" :empty-view-img-style="{ width: '308rpx', height: '308rpx' }" bg-color="#FFF"
			:refresher-status.sync="refresherStatus" :auto-hide-loading-after-first-loaded="false" v-model="dataList"
			@query="queryList">
			<view class="top" slot="top">
				<view class="flex_wrap row_middle row_between searchArea">
					<u-search placeholder="搜索提交人/会议主题" v-model="parameter" bgColor="#E1E1E1" color="#333" focus
						placeholderColor="#999999" :actionStyle="{ color: '#588BF3' }" @search="search" @custom="search"
						clearabled />
				</view>
			</view>
			<u-loading-page :loading="true" slot="loading" loadingText="加载中" />
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="itemBox flex_wrap flex_column" @click="toRequestDetail" :data-id="item.id">
					<view class="flex_wrap itemBox_top">
						<u-text text="提交时间" color="#588BF3" size="32rpx" bold />
						<u-text :text="$u.timeFormat(item.createTime, 'yy.mm.dd')" color="#000" size="24rpx"
							align="right" suffixIcon="arrow-right" iconStyle="fontSize:24rpx;lineHeight:38rpx" />
					</view>
					<view class="itemBox_content flex_wrap flex_column">
						<view class="flex_wrap">
							<u-text :text="item.theme" color="#333" bold size="30rpx" />
							<u-button v-if="Number(item.checkState) === 0" :customStyle="customButtonStyle2" text="审核"
								shape="circle" :hairline="false" />
						</view>
						<u-gap height="22rpx" />
						<view class="itemBox_content_timeBox flex_wrap">
							<view class="itemBox_content_timeBox_lable"><u-text text="时间" color="#999" size="26rpx" />
							</view>
							<view class="itemBox_content_timeBox_value">

							</view>
						</view>
						<u-gap height="22rpx" />
						<view class="itemBox_content_timeBox flex_wrap">
							<view class="itemBox_content_timeBox_lable"><u-text text="地点" color="#999" size="26rpx" />
							</view>
							<view class="itemBox_content_timeBox_value">
								<u-text :text="item.province + item.city + item.county + item.address" color="#333" bold
									size="28rpx" lines="2" />
							</view>
						</view>
						<view class="itemBox_content_icon icon1" v-if="Number(item.checkState) === 0" />
						<view class="itemBox_content_icon icon2" v-else-if="Number(item.checkState) === 1" />
						<view class="itemBox_content_icon icon3" v-else-if="Number(item.checkState) === 2" />
						<view class="itemBox_content_icon icon4" v-else-if="Number(item.checkState) === 3" />
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import FilterMultiple from '@/pages_initiateMeeting/components/FilterMultiple/FilterMultiple.vue';
	import {
		getSelectCSalesManMeet
	} from '@/api/salesmanMeeting.js';
	export default {
		data() {
			return {
				parameter: '',
				pageLoading: false,
				refresherStatus: 0,
				dataList: [1, 2, 3, 4, 5],
				customButtonStyle: {
					// 报名按钮自定义样式
					width: '158rpx',
					height: '44rpx',
					fontSize: '24rpx',
					margin: '0'
				},
				customButtonStyle2: {
					width: '158rpx',
					height: '44rpx',
					fontSize: '24rpx',
					margin: '0',
					color: '#fff',
					background: '#588BF3'
				}
			};
		},
		components: {
			FilterMultiple
		},
		methods: {
			search() {
				this.$refs.paging.reload();
				this.$refs.paging.scrollToTop();
			},
			toRequestDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.$u.route({
					url: 'pages_initiateMeeting/auditMeetingRequest/detail?meetId=' + id
				});
			},
			async queryList(pageNo, pageSize) {
				const that = this;
				const params = {
					pageSize: pageSize,
					pageNum: pageNo,
					parameter: this.parameter
				};
				that.pageLoading = true;
				getSelectCSalesManMeet(params)
					.then(result => {
						that.$refs.paging.complete(result.data.rows);
					})
					.catch(error => {
						that.$refs.paging.complete(false);
					})
					.finally(() => {
						that.pageLoading = false;
					});
			}
		}
	};
</script>

<style lang="scss">
	.searchArea {
		width: 100vw;
		height: 140upx;
		padding: 28upx 28upx 0 28upx;
		background-color: #fff;
	}

	.item {
		width: 100vw;
		height: auto;
		padding: 0 28upx;
		margin-top: 24upx;

		.itemBox {
			width: 100%;
			height: auto;
			border-radius: 12upx;
			box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.08);

			&_top {
				border-bottom: 1px solid #f3f3f3;
				padding: 18upx 24upx;
			}

			&_content {
				width: 100%;
				padding: 26upx 24upx;
				position: relative;

				&_icon {
					width: 116upx;
					height: 116upx;
					position: absolute;
					right: 20upx;
					bottom: 20upx;
					background-size: cover;
				}

				&_icon.icon1 {
					background-image: url('@/static/img/conference/meetingStatus1.png');
				}

				&_icon.icon2 {
					background-image: url('@/static/img/conference/meetingStatus2.png');
				}

				&_icon.icon3 {
					background-image: url('@/static/img/conference/meetingStatus3.png');
				}

				&_icon.icon4 {
					background-image: url('@/static/img/conference/meetingStatus4.png');
				}

				&_timeBox {
					width: 100%;

					&_lable {
						width: 100upx;
					}

					&_value {
						width: 440upx;
					}
				}
			}
		}
	}
</style>
